<template>
    <div>
        <h1>父组件</h1>
        <button @click="changeShow">改变show的值</button>
        <child-vue v-if="show"></child-vue>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    onBeforeMount,
    onBeforeUnmount,
    onBeforeUpdate,
    onMounted,
    onUnmounted,
    onUpdated,
    ref,
} from "vue";
import ChildVue from "./ChildVue.vue";

export default defineComponent({
    components: { ChildVue },
    setup() {
        let show = ref(true);
        function changeShow() {
            console.log(show);
            show.value = !show.value;
        }
        onBeforeMount(() => {
            console.log("父组件的onBeforeMount");
            console.log(this);
        });
        onMounted(() => {
            console.log("父组件的onMounted");
            console.log(this);
        });
        onBeforeUpdate(() => {
            console.log("父组件的onbeforeUpadte");
            console.log(this);
        });
        onUpdated(() => {
            console.log("父组件的onUpdated");
            console.log(this);
        });
        onBeforeUnmount(() => {
            console.log("父组件的onBeforeUnmount");
            console.log(this);
        });
        onUnmounted(() => {
            console.log("父组件onUnmounted");
            console.log(this);
        });
        return {
            show,
            changeShow,
        };
    },
    data() {
        return {
            info: "看看setup当中的值是否可以和data当中的值都放到组件对象上",
        };
    },
    beforeCreate() {
        console.log("父组件的beforeCreate");
        console.log(this);
        console.log(this.show);
        console.log(this.info);
    },
    created() {
        console.log("父组件的created");
        console.log(this);
        console.log(this.show);
        console.log(this.info);
    },
    beforeMount() {
        console.log("父组件的beforeMount");
    },
    mounted() {
        console.log("父组件的mounted");
    },
    beforeUpdate() {
        console.log("父组件的beforeUpdate");
    },
    updated() {
        console.log("父组件的updated");
    },
    beforeUnmount() {
        console.log("父组件的beforeUnmount");
    },
    unmounted() {
        console.log("父组件的unmounted");
    },
});
/*
使用到生命周期构造函数时，使用组合api代替生命周期构造
beforeCreate    setup()
created         setup()
beforeMount     onBeforeMount
mounted         onMounted
beforeUpdate    onBeforeUpdate
updated         onUpdated
beforeUnmount   onBeforeUnmount
unmounted       onUnmounted
setup发生在beforeCreate之前

setup当中的代替生命周期钩子的组合api，比生命周期钩子函数发生的要优先

*/
</script>

<style scoped>

</style>